<template>
	<view class="mainbgc">
		<!-- //搜索内容-->
		<u-popup round="20" :show="show" @close="show=false">
			<view class="mainpadding">
				<view class="flexcenter">
					<view class="titletext">筛选</view>
				</view>
				<view class="strongtext margin_top">时间</view>
				<view class="flexleft" style="flex-wrap: wrap;">
					<view class="screenbox flexcenter" v-for="(item,index) in datelist" :key="item.id"
						@click="change(item.name,index)">
						<view :class="currents == index? 'itemscreenfocus margin_top':'itemscreen margin_top'">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="strongtext margin_top">自定义时间</view>
				<view class="flexleft">
					<view class="inputscreenbox flexcenter" @click="starttime">
						<input class="itemscreen margin_top" type="text" disabled v-model="start">
					</view>
					<view class="zwscreenbox flexcenter">
						<view class="strongtext">-</view>
					</view>
					<view class="inputscreenbox flexcenter" @click="endtime">
						<input class="itemscreen margin_top" type="text" disabled v-model="end">
					</view>
				</view>
				<view class="flexbetween selectboxtop2 margin_top"
					@click="selectRole('/pages/workbench/jiben/kehuda?type=1')">
					<input type="text" placeholder="选择客户" disabled="true" v-model="custom_name">
					<view class="righticon2"></view>
				</view>
				<view class="flexbetween selectboxtop2 margin_top"
					@click="selectRole('/pages/workbench/jiben/yuangongda?type=1',1)">
					<input type="text" placeholder="选择送货员" disabled="true" v-model="send_staff_name">
					<view class="righticon2"></view>
				</view>
				<view class="flexbetween selectboxtop2 margin_top"
					@click="selectRole('/pages/workbench/jiben/yuangongda?type=2',2)">
					<input type="text" placeholder="选择经办人" disabled="true" v-model="staff_name">
					<view class="righticon2"></view>
				</view>
				<view class="flexbetween">
					<view class="surebtn reset flexcenter" style="margin-top: 60rpx;" @click="resetbtn">重置</view>
					<view class="surebtn flexcenter" style="margin-top: 60rpx;" @click="sureBtn">确认</view>
				</view>
			</view>
		</u-popup>
		<header-top :messageInfo="{typeFlag:false,message:'订单',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexleft">
					<view class="nostrongtext" @click="show=true">筛选</view>
				</view>
			</view>
		</header-top>
		<u-datetime-picker :show="shows" v-model="value1" mode="date" @confirm="confirm" @cancel="cancel"
			closeOnClickOverlay @close="shows=false"></u-datetime-picker>
		<u-datetime-picker :show="showss" v-model="value2" mode="date" @confirm="confirms" @cancel="cancels"
			:minDate="mintime" closeOnClickOverlay @close="showss=false"></u-datetime-picker>
		<view class="mainpadding ffffff">
			<u-tabs :list="list2"  @click="tabclick" :scrollable="false" :activeStyle="{
            color: '#0BBDCB',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" lineColor="#0BBDCB"></u-tabs>
		</view>
		<view class="mainpadding flexcenter">
			<view class="flexleft">
				<view class=" left_lable" :class="ly_type==1?'focuslable':'nofocuslable'" @click="changely(1)">订单</view>
				<view class=" right_lable" :class="ly_type==2?'focuslable':'nofocuslable'" @click="changely(2)">含退
				</view>
			</view>
		</view>
		<view class="mainpadding2 paddingbom">
			<!-- 搜索 -->
			<view class="flexbetween">
				<input class="input-text" type="text" placeholder="请输入单号/商品名称/业务员/客户" v-model="keywords">
				<view class="sousuo" @click="init">搜索</view>
			</view>
			<template  v-if="pageShow">
				<view class="flexcenter" v-if="!list.data.length">
					<view class="placeholderimage"></view>
				</view>
				<!-- 列表 -->
				<view class="radius radius mainpadding_top ffffff"  v-for="item in list.data" :key="item.id"
					@click="jumpdetail(item.id,40)">
					<view class="flexbetween">
						<view class="flexleft">
							<view class="nostrongtext margin_right">{{item.order_no}}</view>
							<view class="addresstext margin_right" style="color: #ff0000;" v-show="item.is_bj==2">变价</view>
							<view class="addresstext" style="color: #ff0000;" v-show="item.is_ht==2">含退</view>
						</view>
						<!-- <view class="shlable radius" v-show="item.examine_status==1 && item.delivery_status!=1">已审核</view> -->
						<view class="wlable radius" v-show="item.status==10">未审核</view>
						<view class="clable radius" v-show="item.status==20">待出库</view>
						<view class="wlable radius" v-show="item.status==30">待发货</view>
						<view class="shlable radius" v-show="item.status==40">待收货</view>
						<view class="shlable radius" v-show="item.status==50">已完成</view>
						<view class="hlable radius" v-show="item.status==60">已作废</view>
						<view class="hlable radius" v-show="item.status==70">已拒绝</view>
					</view>
					<view class="margin_top2 flexbetween">
						<view class="flexleft">
							<view class="titletext">{{item.custom.name}}</view>
							<view class="namecolor" style="margin-left: 20rpx;" >{{item.custom.username}}</view>
							<view class="flexright">
								<view class="littleblue" @click.stop="phone(item.custom.mobile)"></view>
							</view>
						</view>
						<view class="margin_top2 ywy" v-if="item.custom.costom_level_info">{{item.custom.costom_level_info.name}}</view>
					</view>
					<view class="margin_top2 ywy flexbetween">
						<view class="flexstart">
							<view class="">经办人：{{item.staff.username}}</view>
							<view class="dizhiimg" @click.stop="phone(item.staff.mobile)"></view>
						</view>
						<view>{{item.createtime_text}}</view>
					</view>
					<view class="flexbetween">
						<view class="flexleft margin_top2">
							<view class="ywy xiankuan">地址：{{item.custom.cityinfo}}{{item.custom.address}}</view>
							<view class="addresstext">{{kmUnit(Number(item.distance))}}</view>
						</view>
						<view class="addressicon margin_right" @click.stop="openmap(item)"></view>
					</view>
					<view class="margin_top2 ywy">来源：{{item.ly_type==1?"订货通":"小程序"}}</view>
					<view class="margin_top2 ywy">
						<view>销：<text style="color: #0bbdcb;">{{item.x_goods_zl_num}}</text>种/ <text style="color: #1ED76D;">{{item.x_goods_num}}</text> 件{{Number(item.x_goods_sendnum)?"（含赠品）":""}}
							<text style="color: #ff0000;" class="margin_left2" v-show="item.t_goods_zl_num">退：{{item.t_goods_zl_num}}种/{{item.t_goods_num}}件</text>
						</view>
					</view>
					<view class="margin_top2 ywy yihang" v-show="item.notes">备注：{{item.notes}}</view>
					<view class="bghui margin_top2 flexbetween">
						<view class="xiaohei margin_right">
							应付款：<text class="xiaohong" style="color: #0bbdcb;">{{item.x_total_price}}</text>
						</view>
						<view class="xiaohei" v-if="Number(item.arrears_price)">
							未付款：<text class="xiaohong">{{item.arrears_price}}</text>
						</view>
						<view class="xiaolv" v-if="!Number(item.arrears_price)">已付款</view>
					</view>
				</view>
			</template>
			
		</view>
		<tabbar current=1></tabbar>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				// :0=全部,10=待审核,20=待出库,30=待发货,40=待收货,50=已完成,60=已作废,70=已拒绝
				list2: [
					{
						id: 10,
						name: '待审核'
					},
					{
						id: 20,
						name: '待出库'
					},
					{
						id: 30,
						name: '待发货'
					},
					{
						id: 40,
						name: '待收货'
					}
				],
				datelist: [{
						id: 1,
						name: '今日'
					},
					{
						id: 2,
						name: '昨日'
					},
					{
						id: 3,
						name: '本月'
					},
				],
				statuslist: [{
						id: 1,
						name: '已完成'
					},
					{
						id: 2,
						name: '待审核'
					},
					{
						id: 3,
						name: '作废'
					},
				],
				fahuolist: [{
						id: 0,
						name: '待发货'
					},
					{
						id: 1,
						name: '待收货'
					},
					{
						id: 2,
						name: '已签收'
					},
				],
				// 分页处理数据
				page: 1,
				limit: 12,
				list: {
					data: [{}]
				},
				keywords: "",
				show: false,
				currents: -1,
				currentstatus: "10",
				start: '开始时间',
				end: '结束时间',
				shows: false,
				showss: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				mintime: Number(new Date()),
				ly_type: "1",
				custom_name:"",
				custom_id:"",
				send_staff_id:"",//送货员
				send_staff_name:"",
				staff_id:"",//业务员
				staff_name:"",
				selectType:1,//1选择送货员，2选择经办人，
				pageShow:false,
				lat: "35.17466",
				lng: "109.67307",
			}
		},
		onLoad() {
			uni.hideTabBar(); //隐藏tab
			// #ifdef APP-PLUS
			this.getlocation()
			// #endif
			// #ifdef MP-WEIXIN || H5
			this.init()
			// #endif
		},
		onShow() {
			let that = this
			uni.$off('khSelectFn');
			uni.$on('khSelectFn', (data) => {
				that.custom_id = data.id
				that.custom_name = data.name
				return false
			})
			uni.$off('ygSelectFn');
			uni.$on('ygSelectFn', (data) => {
				if(that.selectType==1){//送货员
					that.send_staff_id = data.id
					that.send_staff_name = data.name
				} else if(that.selectType==2){//经办人
					that.staff_id = data.id
					that.staff_name = data.name
				}
				return false
			})
		},
		methods: {
			// 获取当前位置信息
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: function(res) {
						console.log("获取经纬度信息", res)
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.init()
					},
					fail(err) {
						uni.hideLoading()
						// checkOpenGPSServiceByAndroid()
						httpRequest.toast("获取经纬度失败，请打开定位重试")
					}
				});
			},
			phone(p){
				uni.makePhoneCall({
						phoneNumber: p.toString()
					}).catch((e) => {
						// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				   })
			},
			selectRole(url,val) {
				this.selectType = val
				uni.navigateTo({
					url
				})
			},
			tabclick(e){
				this.currentstatus  = e.id
				this.init()
			},
			changely(val){
				this.ly_type = val
				this.init()
			},
			cancel() {
				this.shows = false;
			},
			cancels() {
				this.showss = false;
			},
			// 打开地图
			openmap(item) {
				uni.openLocation({
					latitude: Number(item.custom.latitude), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(item.custom.longitude), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: item.custom.address, //即将传到高德或腾讯地图的店铺名称
					address: item.custom.address, //即将传到高德或腾讯地图的详细地址
				})
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			confirm(e) {
				console.log(e);
				this.shows = false;
				this.show = true;
				this.end = '结束时间';
				this.mintime = e.value;
				this.start = this.date(e.value);
				this.currents = -1;
			},
			confirms(e) {
				this.showss = false;
				this.show = true;
				this.maxtime = e.value;
				this.end = this.date(e.value);
				this.currents = -1;
			},
			starttime(e) {
				this.shows = true;
			},
			endtime() {
				this.showss = true;
			},
			change(name, index) {
				if (name == "今日") {
					this.start = this.riqi(0);
					this.end = this.riqi(0);
				} else if (name == "昨日") {
					this.start = this.riqi(-1);
					this.end = this.riqi(-1);
				} else if (name == "本月") {
					this.start = this.benyue();
					this.end = this.riqi(0);
				}
				this.currents = index;
			},
			jumpdetail(id,qxpdid) {
				if (!httpRequest.qxpd(qxpdid, this.$store.state.userInfo.ability_rule_ids)) {
					return false
				}
				uni.navigateTo({
					url:'/pages/workbench/xiaoshou/xiaoshoudxq?id='+id
				})
			},
			// 昨天“-1”今天“0”明天“1”
			riqi(day) {
				let dd = new Date();
				dd.setDate(dd.getDate() + day);
				let y = dd.getFullYear();
				let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
				let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				return y + "-" + m + "-" + d;
			},
			// 本月第一天
			benyue() {
				let y = new Date().getFullYear(); //获取年份
				let m = new Date().getMonth() + 1; //获取月份
				let d = '01'
				m = m < 10 ? '0' + m : m; //月份补 0
				return [y, m, d].join("-")
			},
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/dhtapi/Saleorder/index', 'GET', {
					page: page || 1,
					limit: _this.limit,
					keywords: this.keywords,
					start_time: this.start == '开始时间' ? '' : this.start, //开始日期
					end_time: this.end == '结束时间' ? '' : this.end, //结束日期
					status: this.currentstatus == -1 ? '' : this.currentstatus, //审核状态
					custom_id: this.custom_id,
					staff_id: this.staff_id,
					send_staff_id: this.send_staff_id,
					is_ht: this.ly_type,
					lng: this.lng,
					lat: this.lat,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						this.$set(res.data, 'is_all', false)
						res.data.data.forEach(item => {
							this.$set(item, 'is_check', false)
						})
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
						}
						this.pageShow = true
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			sureBtn() {
				this.show = false
				this.init()
			},
			// 重置
			resetbtn() {
				this.currentstatus = -1
				this.currentfahuostatus = ""
				this.currents = -1
				this.start = "开始时间"
				this.end = "结束时间"
				this.custom_name = ""
				this.custom_id = ""
				this.send_staff_id = "" //送货员
				this.send_staff_name = ""
				this.staff_id = "" //业务员
				this.staff_name = ""
				this.init()
				this.show = false
			},
			// 米，公里转换
			kmUnit(m) {
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if (m >= 1000) {
						v = (m / 1000).toFixed(2) + 'km'
					} else {
						v = m + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.surebtn {
		width: 45%;
	}

	.reset {
		background: #ebb563;
	}

	.input-text {
		width: 588rpx;
		padding: 18rpx 0 18rpx 32rpx;
		background: rgba(153, 153, 153, .1);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.sousuo {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}

	// tab切换
	.selectbox {
		padding: 6rpx 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
		line-height: 33rpx;
		background-color: #e1f4f5;
		border-radius: 30rpx;
		margin-right: 30rpx;
	}

	.noselectbox {
		padding: 6rpx 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
		line-height: 33rpx;
		background-color: #eff0f0;
		border-radius: 30rpx;
		margin-right: 30rpx;
	}

	.dingyue {
		width: 36rpx;
		height: 50rpx;
		background-image: url("@/static/image/system/dingyue.png");
		background-size: 100% 100%;
	}

	.selecttimetext {
		font-size: 24rpx;
		font-family: San Francisco Display-Medium, San Francisco Display;
		font-weight: 500;
		color: #666666;
		line-height: 24rpx;
	}

	.miancolor {
		color: #0BBDCB;
	}

	.smalltext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.ywy {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	// 审核状态
	.clable {
		padding: 6rpx 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FAA500;
		line-height: 28rpx;
		background-color: #f6eddd;
	}

	.hlable {
		padding: 6rpx 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FD463E;
		line-height: 28rpx;
		background-color: #f6e4e3;
	}

	.shlable {
		padding: 6rpx 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		line-height: 28rpx;
		background-color: #e7f9fa;
	}

	.wlable {
		padding: 6rpx 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3AD3D;
		line-height: 28rpx;
		background-color: #fef7ec;
	}

	.inputscreenbox {
		width: 40%;

		input {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333;
			background-color: #f7f9fa;
		}
	}

	.zwscreenbox {
		width: 20%;
		line-height: 80rpx;
	}

	.itemscreenfocus {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		background-color: #e7f9fa;
	}

	// 筛选内容
	.screenbox {
		width: 33.33%;
	}

	.itemscreen {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		background-color: #f7f9fa;
	}

	.paddingbom {
		padding-bottom: 160rpx;
	}
</style>